<template>
 <div >
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
    <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
 </div>
</template>

<script type="text/ecmascript-6">
import  CityHeader  from "./components/header";
import  CitySearch  from "./components/search";
import  CityList from "./components/list";
import  CityAlphabet from "./components/alphabet";
import  axios from "axios"
 export default {
 name:'City',
 data () {
    return {
        cities:{},
        hotCities:[],
        letter:''
    }
 },
 
 props: {

 },
 components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet,
},

 methods:{
    getCityInfo(){
         axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
     },
    handleGetCityInfoSucc(res){
        console.log(res)  
        if(res.data.ret && res.data){
            this.cities = res.data.data.cities  
            this.hotCities = res.data.data.hotCities  
        }
    },
    handleLetterChange(letter){
        this.letter = letter;
        console.log(letter)
    }
 },
 mounted(){
    this.getCityInfo()
 }
}
</script>

<style>

 
</style>
